<template>
    <div class="box">
        <p class="title">详情内容{{pageName}}</p>
        <el-form :model="list" status-icon ref="form" label-width="110px" :rules="rules">
            <!-- <el-form-item label="模块ID" prop="bid">
                <el-input disabled v-model="list.bid"></el-input>
            </el-form-item> -->
            <el-form-item label="是否上架" prop="status">
                <el-select v-model.number="list.status" placeholder="请选择">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="停用" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否首页展示" prop="indexShow">
                <el-select v-model.number="list.indexShow" placeholder="请选择">
                    <el-option label="展示" :value="1"></el-option>
                    <el-option label="不展示" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="展示类型" prop="type">
                <el-select v-model.number="list.type" placeholder="请选择">
                    <el-option label="图文" :value="1"></el-option>
                    <el-option label="icon" :value="2"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="标题" prop="title">
                <el-input v-model="list.title"></el-input>
            </el-form-item>
            <el-form-item label="图片地址" prop="imagePath">
                <el-upload ref="upload" action="http://api.zhonpay.com/admin/upload/upload" name="image" :limit="1" list-type="picture" :file-list="fileList" :on-success="uploadImgSuccess" :on-remove="uploadImgRemove">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip">请上传jpg/png格式文件，且不超过1024kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="预览数量" prop="preview">
                <el-input v-model.number="list.preview"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sorting">
                <el-input v-model.number="list.sorting"></el-input>
            </el-form-item>
            <el-form-item label="详情介绍" prop="content">
                <el-input v-model="list.content" style="display:none"></el-input>
                <div id="editor"></div>
            </el-form-item>
            <el-form-item class="whole-handle-btn-box">
                <el-button type="primary" @click="handleCertain">确定</el-button>
                <router-link class="back-btn" to="index">
                    <el-button>返回</el-button>
                </router-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id: 0,
            bodyID: 0,
            list: {
                bid: 0
            },
            fileList:[],
            pageName: '新增',
            pageType: 1,
            rules: {
                preview: { required: true, message: "标题不能为空", trigger: "blur" },
                title: { required: true, message: "标题不能为空", trigger: "blur" },
                sorting: { required: true, message: "排序不能为空", trigger: "blur" },
                status: { required: true, message: "状态不能为空", trigger: "change" },
                indexShow: { required: true, message: "请选择是否需要展示", trigger: "change" },
                content: { required: true, message: "详情内容不得为空", trigger: "change" }
            }
        };
    },
    created() {
        this.loadinEditor();
    },
    methods: {
        // 判断是否是添加
        isAdd() {
            if (this.$route.query.type === 2) {
                this.list = this.$route.query.info;
                this.pageName = '编辑';
                this.fileList.push({
                    "url":this.list.imagePath,
                    "name":'image',
                });
                //为富文本编辑器添加默认值
                this.editor.txt.html(this.list.content);
            } else {
                this.bodyID = this.$route.query.id;
                this.pageName = '新增';
            }
            this.pageType = this.$route.query.type;
        },
        // 加载富文本
        loadinEditor() {
            const _this = this;
            //获取分类列表
            let E = require("wangeditor");
            //加载富文本编辑器
            this.$nextTick(() => {
                var editor = new E("#editor");
                editor.customConfig.menus = [
                    "head", // 标题
                    "bold", // 粗体
                    "fontSize", // 字号
                    "fontName", // 字体
                    "italic", // 斜体
                    "underline", // 下划线
                    "strikeThrough", // 删除线
                    "foreColor", // 文字颜色
                    "backColor", // 背景颜色
                    "link", // 插入链接
                    "list", // 列表
                    "justify", // 对齐方式
                    "image", // 插入图片
                    "table", // 表格
                    "undo", // 撤销
                    "redo" // 重复
                ];
                editor.customConfig.uploadImgServer =
                    "http://api.zhonpay.com/admin/upload/upload";
                editor.customConfig.zIndex = 2;
                editor.customConfig.uploadFileName = "image";
                editor.customConfig.uploadImgHooks = {
                    customInsert: function (insertImg, result, editor) {
                        insertImg(result.content.path);
                    }
                };
                editor.customConfig.onchange = function (html) {
                    if (html === "<p><br></p>") {
                        html = "";
                    }
                    _this.$set(_this.$data.list, "content", html);
                };
                editor.customConfig.customAlert = function () { };
                editor.create();
                this.editor = editor;
                _this.isAdd();
            });

        },

        // 确定添加
        handleCertain() {
            const _this = this;
            this.$refs.form.validate(bool => {
                if (bool) {
                    this.$confirm("您确定要添加么?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            this.$axios({
                                url: "admin/content/setBody",
                                data: {
                                    contentID: _this.pageType === 2 ? _this.list.id : '',
                                    bodyID: _this.pageType === 2 ? _this.list.bodyID : _this.bodyID,
                                    status: _this.list.status,
                                    indexShow: _this.list.indexShow,
                                    type: 1,
                                    title: _this.list.title,
                                    icon: _this.list.icon ? _this.list.icon : '',
                                    imagePath: _this.list.imagePath ? _this.list.imagePath : '',
                                    preview: _this.list.preview,
                                    content: _this.list.content,
                                    sorting: _this.list.sorting,
                                },
                                success(res) {
                                    if (res.data.code === 200) {
                                        _this.$message({
                                            type: "success",
                                            message: res.data.msg
                                        });
                                        if (_this.pageType === 2) {
                                            _this.$router.go(-1);
                                        } else {
                                            _this.$refs.form.resetFields();
                                            _this.editor.txt.clear();
                                            _this.$refs.upload.clearFiles();
                                        }
                                    } else {
                                        _this.$message({
                                            type: "warning",
                                            message: res.data.msg
                                        });
                                    }
                                }
                            });
                        })
                        .catch(() => { });
                }
            });
        },
        uploadImgSuccess(response, file, fileList) {
            if (response.code === 200) {
                this.$message({
                    message: response.msg
                });
                this.list.imagePath = response.content.path;
            } else {
                this.$message({
                    type: "warning",
                    message: response.msg
                });
            }
        },
        // 移除上传成功的图片，刷新数据
        uploadImgRemove(event) {
            this.$set(this.$data.list, "imagePath", "");
        }
    }
};
</script>

<style scoped>
.box {
    padding: 30px;
    width: 100%;
}
.el-form {
    width: 50%;
    margin: 0 auto;
}
.title {
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
}
.back-btn {
    margin-left: 10px;
}
#editor >>> .w-e-menu {
    padding: 0 8px;
}
</style>
